<template>
  <div class="home">

    <!--轮播 搜索 部分-->
    <div class="swiper">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
          <div @click="banner1()"><img src="../assets/disTrueHome/1.jpg" alt="" class="swpImg"></div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div @click="banner2()"><img src="../assets/disTrueHome/2.jpg" alt="" class="swpImg"></div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div @click="banner3()"><img src="../assets/disTrueHome/3.jpg" alt="" class="swpImg"></div>
        </mt-swipe-item>
      </mt-swipe>
      <!-- <div class="canvas">
         <div>
           <img src="../assets/disTrueHome/ico_fenlei@1x.png" alt="">
         </div>
         <div>
           <img src="../assets/disTrueHome/ico_search@1x.png" alt="">
           <input type="text" placeholder="请输入名称">
         </div>
         <div>
           <img src="../assets/disTrueHome/ico_xiaoxi@1x.png" alt="">
         </div>
       </div>-->
    </div>

    <!--  跳转 -->
    <div class="router">
      <ul v-for="nfList in nfList">
        <li @click="texuanqu">
          <div class="img">
            <img :src="nfList.brandImg1" alt="">
          </div>
          <!--<img src="../assets/disTrueHome/邀请有礼图标@1x.png" alt="">-->
          <p>{{nfList.navigationName1}}</p>
        </li>
        <li @click="Ranking">
          <div class="img">
            <img :src="nfList.brandImg2" alt="">
          </div>
          <!--<img src="../assets/disTrueHome/邀请有礼图标@1x.png" alt="">-->
          <p>{{nfList.navigationName2}}</p>
        </li>
        <li @click="rule">
          <div class="img">
            <img :src="nfList.brandImg3" alt="">
          </div>
          <!--<img src="../assets/disTrueHome/邀请有礼图标@1x.png" alt="">-->
          <p>{{nfList.navigationName3}}</p>
        </li>
        <li @click="wallet">
          <div class="img">
            <img :src="nfList.brandImg4" alt="">
          </div>
          <!--<img src="../assets/disTrueHome/邀请有礼图标@1x.png" alt="">-->
          <p>{{nfList.navigationName4}}</p>
        </li>
      </ul>
    </div>

    <!--    分割线   -->
    <div class="gray"></div>
    <div class="Rule">
      <ul>
        <li>
          <img src="../assets/check.jpg" alt="">
          <p>品牌商品低价出售</p>
        </li>
        <li>
          <img src="../assets/check.jpg" alt="">
          <p>7天无忧退换</p>
        </li>
        <li>
          <img src="../assets/check.jpg" alt="">
          <p>全平台包邮</p>
        </li>
      </ul>
    </div>
    <!--   数据部分  -->
    <div class="sj">
      <div class="AllN">
        <p>品牌精选</p>
        <p>
          <router-link :to="{name: 'Brand'}">查看全部</router-link>
        </p>
      </div>

      <div class="AllShuj">
        <div class="lBig" @click="brand(index)" v-for="(mallBrand, index) in mallBrandList" v-if="index===0">
          <p>{{mallBrand.brandName}}</p>
          <p>{{mallBrand.brandContent}}</p>
          <button>进入专区</button>
          <img :src="mallBrand.brandImg" alt="">
          <!--<img src="../assets/disTrueHome/iphone.jpg" alt="">-->
        </div>
        <div class="lbig1">
          <div @click="brand(index)" v-for="(mallBrand,index) in mallBrandList" v-if="index!==0">
            <p>{{mallBrand.brandName}}</p>
            <p>{{mallBrand.brandContent}}</p>
            <img :src="mallBrand.brandImg" alt="">
            <!--<img src="../assets/disTrueHome/watch.jpg" alt="">-->
          </div>
        </div>
      </div>
    </div>
    <!--    分割线   -->
    <div class="gray"></div>
    <!--  商品列表  -->
    <div class="productList">
      <p>金榜题名</p>
    </div>

    <!-- 轮播效果 -->
    <div class="bottom">
      <ul>
        <li v-for="(list,index) in mallTopList" @click="goodsDetail1(index)">
          <div class="goods-pic">
            <img :src="list.mallImg" alt="">
          </div>
          <div class="goods-price">
            <p class="name">{{list.mallName}}</p>
            <div class="price">平台价:{{list.salePrice / 100}}元</div>
            <div class="jd">佣金{{list.expectedCommission / 100}}元</div>
          </div>
        </li>
      </ul>
    </div>

    <!--    分割线   -->
    <div class="gray"></div>

    <!--  特选区  -->
    <!--<div v-show="texuan" id="message">
      <div class="productList">
        <p>特选区</p>
      </div>
      <ul class="Recommend">
        <li v-for="(APList,index) in APList" @click="gofxdetail(index)">
          <div class="img">
            &lt;!&ndash;<img :src="APList.mallImg" alt="">&ndash;&gt;
          </div>
          <div class="JH">
            <p class="p1">{{APList.mallName}}</p>
            <p class="p2">库存:{{APList.stock}}件</p>
            <div class="qian">
              <p class="p3">￥{{APList.salePrice/100}}</p>
            </div>
            <mt-button class="Tunho" type="default" size="small">立即囤货</mt-button>
          </div>
        </li>
      </ul>
    </div>-->

    <!--推荐商品  -->
    <div v-show="tuijian">
      <div class="productList">
        <p>为您推荐</p>
      </div>
      <!--  推荐商品数据  -->
      <ul class="Recommend">
        <li v-for="(rema,index) in recommendMallList" @click="goodsDetail2(index)">
          <div class="img">
            <img :src="rema.mallImg" alt="">
          </div>

          <div class="JH">
            <p class="p1">{{rema.mallName}}</p>
            <p class="p2">已进货:{{rema.stock}}件</p>
            <div class="qian">
              <p class="p3">￥{{rema.salePrice / 100}}</p>
              <p class="p4">￥{{rema.expectedCommission / 100}}</p>
            </div>
            <div class="JD">
              <p class="p5">京东价:{{rema.jdPrice / 100}}</p>
              <P class="p6">预计佣金</P>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="footer foot">
      <mt-tabbar class="tabbar">
        <mt-tab-item id="tab1" class="nownow">
          <img slot="icon" src="../assets/images/ico_home_2@1x.png">
          首页
        </mt-tab-item>
        <mt-tab-item id="tab2">
          <img slot="icon" src="../assets/images/ico_fenlei_1@1x.png" @click="toMemberContainer">
          分类
        </mt-tab-item>
        <mt-tab-item id="tab3">
          <img slot="icon" src="../assets/images/ico_dianpu_1@1x.png" @click="toShops">
          店铺
        </mt-tab-item>
        <mt-tab-item id="tab4">
          <img slot="icon" src="../assets/images/ico_wode_1@1x.png" @click="tomyHomeFX">
          我的
        </mt-tab-item>
      </mt-tabbar>
    </div>

    <loading v-show="showLoading "></loading>
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>
  </div>
</template>

<script>
  import Swiper from '../../static/swiper.min.js'
  import index from "../router"
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu,get_userInfo } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  import { req_msg_10017 } from '../components/httpUtil/httpMsgTool'
  import { relogin } from "./httpUtil/httpUtil";

  let swiper;
  export default {
    name: "disTrueHome",
    data() {
      return {
        mallTopList: {},  // 金榜题名
        recommendMallList: {},  // 为您推荐
        nfList: {}, // 导航
        mallBrandList: {},  // 品牌精选
        showLoading: true, //显示加载动画
        APList: [], // 特选商品
        tuijian: true,
        texuan: false,
        list: [],
        index: "",
        showAlert: false,
        alertText: null,
        wxlist: {},
      }
    },
    created(){
      //  const shoptitle=JSON.parse(window.localStorage.loginP).shop.shopName
      //  const shopurl=JSON.parse(window.localStorage.loginP).shop.shopUrl
      //  const shopimg=JSON.parse(window.localStorage.data).headImg
      // this.wxshare(wxtitle,wxdesc,wxurl,wximg)
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = ()=> {
            varThis.showAlert = false;
            let _this = varThis
            relogin(_this)
          }
          return;
        }
        if (get_userInfo('type') !== 1) {
          varThis.alertTip('不是经销商,不能访问')
          varThis.go = function () {
            varThis.showAlert = false;
            varThis.$router.push('/mall')
          }
          return;
        }

         // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })

        if (JSON.parse(window.localStorage.loginP).hasOwnProperty('shop')) {
          localStorage.setItem('shopId', JSON.parse(window.localStorage.loginP).shop.id);
        }

        req_msg_10017(varThis, function (varRet, varThis, res) {
          if (res.data.p.isTrue) {
            varThis.hideLoading();
            varThis.recommendMallList = res.data.p.recommendMallList
            varThis.nfList = res.data.p.nfList
            varThis.mallTopList = res.data.p.mallTopList
            varThis.mallBrandList = res.data.p.mallBrandList;
          } else {
            varThis.hideLoading();
            varThis.alertTip(res.data.p.errorMsg);
            if (res.data.p.errorCode === 90) {
              varThis.go = () => {
                varThis.showAlert = false
                let _this = varThis
                relogin(_this)
              }
            }
          }
        })
        // varThis.shopId = http_getParam('shopId')
        // varThis.scanCode();
      }, 1)
    },
    mounted() {
      // console.log(JSON.parse(window.localStorage.data).type)
      // wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
      //   if (varRet == -1) {
      //     varThis.alertTip('网络错误');
      //     varThis.go = function () {
      //       varThis.showAlert = false;
      //     }

      //   }
      //   // 关注钱应该判断下是否已经关注过了
      //   msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
      //     varThis.wxlist=res.data.p.sign
      //     wx_config(varThis.wxlist);
      //     wx_hideAllMenu();
      //     wx.hideMenuItems({
      //       //禁用单独分享朋友圈QQ空间等功能
      //       menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
      //     });
      //   })


      // },1)
      // if (JSON.parse(window.localStorage.loginP).hasOwnProperty('shop')) {
      //   localStorage.setItem('shopId', JSON.parse(window.localStorage.loginP).shop.id);
      // }
    },
    methods: {
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go() {
        this.showAlert = false
      },
      // 隐藏动画
      hideLoading() {
        this.showLoading = false;
      },
      disTrueHome() {
        this.$router.push({name: 'disTrueHome'})
      },
      banner1() {
        this.$router.push("./SpecialTx")
      },
      banner2() {
        localStorage.setItem('FL', JSON.stringify({
          'fid': 14, // 1级分类id
          'id': 73, // 2级分类id
          'kindname': "石英女式表"
        }))
        this.$router.push("./MemberList")
      },
      banner3() {
        localStorage.setItem('FL', JSON.stringify({
          'fid': 3, // 1级分类id
          'id': 33, // 2级分类id
          'kindname': "厨房小电"
        }))
        this.$router.push("./MemberList")

      },
      toMemberContainer() {
        this.$router.push({name: 'MemberContainer'})
      },
      toShops() {
        console.log(JSON.parse(window.localStorage.loginP).hasOwnProperty('shop'));
        console.log(JSON.parse(window.localStorage.loginP))
        if (JSON.parse(window.localStorage.loginP).hasOwnProperty('shop')) {
          // localStorage.setItem('shopId', JSON.parse(window.localStorage.loginP).shop.id);
          this.$router.push({name: 'Shops'})
        } else {
          this.$router.push({name: 'NewShop'});
        }
      },
      tomyHomeFX() {
        this.$router.push({name: 'myHomeFX'})
      },
      texuanqu: function (index) {
        this.showLoading = true;
        this.$router.push("./SpecialTx")
        /*  document.documentElement.scrollTop=1600*/
        /*     document.body.scrollTop=1600*/
        this.texuan = true
        this.tuijian = false
        const jsonValue1 = JSON.stringify({
          "c": "10019",
          "p": {
            "mallName": '',
            "userId": JSON.parse(window.localStorage.data).id, //用户ID
            "tokenId": token(),
            "startIndex": 0,
            // "owerId": "1009",//店主的用户ID
            'pageSize': 10,
          }
        });

        this.$http.post(api + '/qqs.us', jsonValue1)
          .then((res) => {
            console.log(res);
            if (res.data.p.isTrue) {
              this.hideLoading();
              this.APList = res.data.p.apMallList
            } else {
              this.hideLoading();
              this.alertTip(res.data.p.errorMsg);
              if (res.data.p.errorCode === 90) {
                this.go = () => {
                  this.showAlert = false
                  let _this = this;
                  relogin(_this)
                }
              }
            }
          })
          .catch((error) => {
            this.hideLoading();
            console.log(error);
          });
      },
      gofxdetail: function (index) {
        console.log(1)
        console.log(this.APList[index].mallId)
        this.$router.push({
          name: "FXGoodsDetail",
          params: {
            userId: localStorage.getItem(JSON.parse(window.localStorage.data).id),
            mallId: this.APList[index].mallId,
            stock: this.APList[index].stock
          }
        })
      },
      goodsDetail1(index) {
        window.localStorage.mallId = this.mallTopList[index].mallId;
        this.$router.push({
          name: "detail", //金榜题名 跳转 普通商品详情
          query: {
            /* userId: localStorage.getItem(JSON.parse(window.localStorage.data).id),*/
            shopId:JSON.parse(window.localStorage.shop).id,
            mallId: this.mallTopList[index].mallId,
            shopType:1

          }
        })
      },
      goodsDetail2: function (index) {
        window.localStorage.mallId = this.recommendMallList[index].mallId;
        this.$router.push({
          name: "detail", //为您推荐 跳转 普通商品详情
          query: {
            /* userId: localStorage.getItem(JSON.parse(window.localStorage.data).id),*/
            shopId:JSON.parse(window.localStorage.shop).id,
            mallId: this.recommendMallList[index].mallId,
            shopType:1

          }
        })
      },
      brand(index) {
        localStorage.setItem('FL', JSON.stringify({
          'fid': 16, // 1级分类id
          'id': 22, // 2级分类id
          'kindname': "手机配件"
        }))
        this.$router.push({name: 'MemberList', params: {brandId: this.mallBrandList[index].id}})
      },
      Ranking() {
        this.$router.push("./Ranking")
      },
      rule() {
        this.$router.push("./Rules")
      },

      wallet() {
        this.$router.push("./myHomeFX")
      }
    }
  }
</script>
<style scoped lang="scss">
  .bottom {
    width: 100%;
    height: 345px;
    box-sizing: border-box;
    padding: 22px 20px 0 20px;
    background: #ffffff;
    ul {
      overflow-x: auto;
      overflow-y: hidden;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      flex-flow: row nowrap;
      li {
        margin: 0 15px;
        height: 100%;
        .goods-pic {
          width: 180px;
          height: 180px;
          /*border: 1px solid ;*/
          margin-bottom: 10px;
          /*border: 1px solid #f4f4f4;*/
          background: #f3f7fb;
          img {
            width: 180px;
            height: 180px;
          }
        }
        .goods-price {
          text-align: center;
          P:nth-of-type(1) {
            width: 174px;
            font-size: 24px;
            color: #3b3b43;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .price {
            font-size: 20px;
            color: #a1a1a1;
            margin-top: 15px;
            text-align: center;
          }
          .jd {
            font-size: 24px;
            color: #fe3519;
            margin-top: 15px;
            text-align: center;
          }
        }
      }
    }
  }

  .Tunho {
    margin-top: 10px;
  }

  * {
    list-style: none;
  }

  .home {
    padding-bottom: 92px;
  }

  .swiper {
    width: 100%;
    height: 320px;
    /*background: url("../assets/disTrueHome/bg.jpg");*/
    background-size: 100% 100%;
    position: relative;
    .swpImg {
      width: 100%;
      height: 320px;
    }
    .canvas {
      position: absolute;
      top: 10px;
      overflow: hidden;
      display: flex;
      div:nth-of-type(1) {
        width: 74px;
        height: 74px;
        border-radius: 50%;
        background: #ffffff;
        opacity: 0.75;
        margin-left: 24px;
        margin-top: 20px;
        position: relative;
        img {
          width: 32px;
          height: 26px;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          margin: auto;
        }
      }
      div:nth-of-type(2) {
        margin-left: 10px;
        width: 427px;
        height: 76px;
        border-radius: 250px;
        background: #ffffff;
        opacity: 0.75;
        margin-top: 20px;
        position: relative;
        display: flex;
        justify-content: left;
        img:nth-of-type(1) {
          width: 37px;
          height: 35px;
          margin-left: 22px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
        input {
          border: none;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          margin-left: 73px;
        }
      }

      div:nth-of-type(3) {
        width: 74px;
        height: 74px;
        border-radius: 50%;
        background: #ffffff;
        opacity: 0.75;
        margin-left: 10px;
        margin-top: 20px;
        position: relative;
        img {
          width: 40px;
          height: 38px;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          margin: auto;
        }
      }

    }
  }

  .router {
    width: 100%;
    height: 200px;
    margin-top: -24px;
    /*background: url("../assets/disTrueHome/bg@1x.png");*/
    background-size: cover;
    ul {
      display: flex;
      .img {
        display: inline-block;
        width: 103px;
        height: 103px;
        border-radius: 50%;
        margin: 48px 0 10px;
        background: #f3f7fb;
      }
      img {
        width: 103px;
        height: 103px;
        border-radius: 50%;
      }
      li {
        width: 25%;
        text-align: center;
        p {
          font-size: 20px;
          color: #3b3b43;
        }
      }
    }
  }

  .gray {
    width: 100%;
    height: 20px;
    background: #f4f4f4;
  }

  .Rule {
    width: 100%;
    height: 81px;
    border-bottom: 1px solid #f4f4f4;
    ul {
      width: 100%;
      display: flex;
      height: 81px;
      li {
        display: flex;
        height: 100%;
        /*width: 40%;*/
        img {
          width: 32px;
          height: 32px;
          margin-top: 29px;
          margin-left: 22px;
          line-height: 81px;
          border-radius: 50%;
        }
        p {
          font-size: 22px;
          margin-top: 31px;
          margin-left: 8px;
        }
      }
    }
  }

  .sj {
    width: 100%;
    height: 100%;
    .AllN {
      width: 100%;
      height: 69px;
      background: #ffffff;
      display: flex;
      P:nth-of-type(1) {
        font-size: 24px;
        color: #3b3b43;
        margin-top: 22px;
        margin-left: 30px;
        width: 50%;
      }
      P:nth-of-type(2) {
        font-size: 20px;
        color: #51515b;
        margin-top: 26px;
        width: 50%;
        margin-right: 30px;
        text-align: right;
      }
    }

    .AllShuj {
      width: 100%;
      height: 498px;
      margin: auto;
      .lBig {
        margin: 0 10px;
        height: 195px;
        margin-top: 20px;
        background: #f3f7fb;
        position: relative;
        p:nth-of-type(1) {
          font-size: 28px;
          color: #3c3e45;
          padding-left: 37px;
          padding-top: 20px;
        }
        p:nth-of-type(2) {
          font-size: 20px;
          color: #fe3519;
          margin: 16px 0 0 37px;
        }
        button {
          background: url("../assets/btn_pindan@1x.png");
          background-size: 100% 100%;
          border: none;
          outline: none;
          border-radius: 10px;
          color: #ffffff;
          font-size: 25px;
          width: 150px;
          height: 50px;
          margin: 16px 0 0 30px;
        }
        img {
          width: 236px;
          height: 135px;
          position: absolute;
          top: 35px;
          left: 317px;
        }
      }
      .lbig1 {
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        div {
          width: 29%;
          height: 235px;
          background: #f3f7fb;
          position: relative;
          p:nth-of-type(1) {
            padding-top: 25px;
            text-align: center;
            font-size: 24px;
            color: #3c3e45;
          }
          p:nth-of-type(2) {
            padding-top: 16px;
            text-align: center;
            font-size: 20px;
            color: #fe3519;
          }
          img {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 120px;
            left: 50%;
            transform: translate(-50%);
          }
        }
        div:nth-of-type(1) {
          margin-left: 0px;
        }
      }
    }
  }

  .productList {
    width: 100%;
    height: 69px;
    background: #ffffff;
    border-bottom: 1px solid #f4f4f4;
    P:nth-of-type(1) {
      font-size: 24px;
      color: #3b3b43;
      margin-top: 22px;
      margin-left: 30px;
    }
    ul {
      width: 100%;
      height: 345px;
      border: 1px solid;
    }
  }

  /*.div1 {
    width: 100%;
    overflow: hidden;
    ul:nth-of-type(1) {
      height: 345px;
      display: flex;
      margin-top: 15px;
      li {
        height: 396px;
        width: 180px;
        margin-left: 20px;
        .img {
          width: 180px;
          height: 180px;
          !*border: 1px solid #f4f4f4;*!
          background: #f3f7fb;
          img {
            width: 180px;
            height: 180px;
          }
        }
        p:nth-of-type(1) {
          width: 174px;
          font-size: 24px;
          color: #3b3b43;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p:nth-of-type(2) {
          font-size: 20px;
          color: #a1a1a1;
          margin-top: 15px;
          text-align: center;
        }
        p:nth-of-type(3) {
          font-size: 24px;
          color: #fe3519;
          margin-top: 15px;
          text-align: center;
        }
      }
      li:nth-of-type(1) {
        margin-left: 30px;
      }
    }
  }*/

  .Recommend {
    width: 100%;
    li {
      width: 100%;
      height: 296px;
      background: #ffffff;
      display: flex;
      border-bottom: 1px solid #f4f4f4;
      img {
        width: 220px;
        height: 220px;
      }
      .img {
        width: 220px;
        height: 220px;
        margin: 26px 0 0 26px;
        /*border: 1px solid #f4f4f4;*/
        background: #f3f7fb;
        img {
          width: 220px;
          height: 220px;
        }
      }
      .JH {
        margin: 24px 10px 0 26px;
        .p1 {
          font-size: 28px;
          color: #3b3b43;
          /*只显示两行文字*/
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .p2 {
          font-size: 20px;
          color: #a1a1a1;
          margin-top: 22px;
        }
        .qian {
          display: flex;
          margin-top: 30px;
          .p3 {
            color: #3b3b43;
            font-size: 32px;
            width: 150px;
          }
          .p4 {
            color: #fd4c2e;
            font-size: 32px;
            margin-left: 50px;
          }
        }
        .JD {
          display: flex;
          margin-top: 14px;
          .p5 {
            font-size: 20px;
            color: #a1a1a1;
            width: 150px;
          }
          .p6 {
            margin-left: 50px;
            color: #a1a1a1;
            font-size: 20px;
          }
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 92px;
    width: 100%;
  }

  .tabbar {
    position: fixed;
    box-sizing: border-box;
    height: 92px;
    border-top: 1px solid #f3f3f3;
    color: #898d93;
    padding-top: 6px;
  }

  .footer .mint-tab-item {
    padding-top: 3px;
    height: 78px;
  }

  .nownow {
    color: #fe3f22;
  }

  .jxImg1 {
    position: absolute;
    width: 236px;
    height: 135px;
    top: 35px;
    left: 317px;
  }

  .jxImg2 {
    width: 84px;
    height: 117px;
    margin-left: 53px;
    margin-top: 10px;
  }

  .jxImg3 {
    width: 127px;
    height: 86px;
    margin-left: 30px;
    margin-top: 36px;
  }

  .jxImg4 {
    width: 140px;
    height: 106px;
    margin-left: 26px;
    margin-top: 24px;
  }
</style>

